import { PageContainer } from "@ant-design/pro-layout"
import { useAxiosPost } from "@sker/sdk"
import { renderAdminPage, useWebSocket } from "@sker/ui"
import { Button, Col, Row } from "antd"
import { useEffect, useState } from "react"


export const ControlPage: React.FC<{}> = ({ }) => {
    const { fetch: toHomeAll } = useAxiosPost(`autojs/core/web/script/toHomeAll`)
    const { fetch: openKwai } = useAxiosPost(`autojs/core/web/script/openKwai`)
    const { fetch: openNebula } = useAxiosPost(`autojs/core/web/script/openNebula`)
    const { latestMessage, connect } = useWebSocket('autojs/core/web/ws?uuid=RUN_DEBUG_SCRIPT', {})
    const [logData, setLogData] = useState<string[]>([])

    useEffect(() => {
        if (!latestMessage) return;
        const result = JSON.parse(latestMessage.data)
        const { data, type, uuid, log, id } = result;
        if (type === "CLOUD_DEBUG") {
            log && setLogData((pre) => ([...pre, `[${uuid}]-${log}`]))
        }
    }, [latestMessage]);

    return <PageContainer>
        <div className="flex">
            <div className="px-12px py-8px flex center"><Button className="ml-8px" type={'primary'} onClick={openKwai}>快手</Button></div>
            <div className="px-12px py-8px flex center"><Button className="ml-8px" type={'primary'} onClick={openNebula}>快手极速</Button></div>
        </div>
        <div className="h-24px"></div>
        <div className="h-360px bg-#000000 c-#ffffff px-24px py-12px">
            {logData.map((txt, index) => {
                return <div key={index}>{txt}</div>
            })}
        </div>
        <div className="h-24px"></div>
        <div className="absolute bottom-0px left-0px right-0px px-24px">
            <Row gutter={[16, 16]}>
                <Col span={4} className="center py-12px bg-#d5390a c-#ffffff cursor" onClick={toHomeAll}>返回</Col>
                <Col span={4} className="center py-12px bg-#d5390a c-#ffffff cursor">息屏</Col>
                <Col span={4} className="center py-12px bg-#d5390a c-#ffffff cursor">亮屏</Col>
                <Col span={4} className="center py-12px bg-#d5390a c-#ffffff cursor">主页</Col>
                <Col span={4} className="center py-12px bg-#d5390a c-#ffffff cursor">音量+</Col>
                <Col span={4} className="center py-12px bg-#d5390a c-#ffffff cursor">音量-</Col>
            </Row>
        </div>
    </PageContainer>
}
renderAdminPage(ControlPage, 'autojs/core/web/control')
